import React, { useEffect, useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'
import axios from 'axios';

export default function Index() {
  let [list, setList] = useState([]);
  let navigate = useNavigate();

  // 获取新闻列表 ，需要通过 axios 
  useEffect(() => {
    (async () => {
      let { data } = await axios.get("/api/list");
      //  console.log(data);
      setList(data);
    })();
  }, [])
  // 原生的跳转会刷新页面
  const gotoDetail = (id) => {
    // window.location.href = "/detail/"+id
    // window.history.go(1)
    navigate("/detail/" + id, {
      state: { name: "hello" }
    });
  }


  return (
    <div>
      <h1>列表组件</h1>
      <Outlet />
      {list.map(item => <div onClick={() => { gotoDetail(item.id) }} key={item.id}><p >{item.title}</p></div>)}
    </div>
  )
}
